<!DOCTYPE>
<html>
<head>
	<title>移动端手指触控插件</title>
    <style type="text/css">
    #div{
    	width: 100%;
    }
    	img{
    		width: 100%;
    	}
    </style>
</head>
<body>
  <div onTap="handleTap" id="div">
  	<img src="c.jpg">
  </div>
  <p class="pa"></p>
<script type="text/javascript" src="alloy_finger.js"></script>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
var jd=0;
	var af = new AlloyFinger(document.getElementById("div"), {
    touchStart: function (e) {console.log("touchStart")},
    touchMove: function () { console.log("touchMove")},
    touchEnd:  function () { console.log("touchEnd")},
    touchCancel: function () { console.log("touchCancel")},
    multipointStart: function () {console.log("multipointStart") },
    multipointEnd: function () {console.log("multipointEnd") },
    tap: function () {console.log("tap") },
    doubleTap: function () {console.log("doubleTap") },
    longTap: function () { console.log("longTap")},
    singleTap: function () {"singleTap" },
    rotate: function (evt) {
        console.log(evt.angle);
        $(".pa").html(evt.angle)
        jd+=evt.angle;
        $("#div").css("transform","rotate("+(jd)+"deg)")
    },
    pinch: function (evt) {
        console.log(evt.zoom);
    },
    pressMove: function (evt) {
        console.log(evt.deltaX);
        console.log(evt.deltaY);
    },
    swipe: function (evt) {
        console.log("swipe" + evt.direction);
    }
});

	var handleTap=function(){
		console.log(111);
	}
</script>
</body>
</html>